<template>
	<div class="dashboard-container">
		<el-card style="height: 120px; margin-bottom: 20px">
			<!-- 给el-form绑定form -->
			<el-form label-width="80px" :model="form" :inline="true">
				<el-form-item>
					<el-input v-model="form.phone" placeholder="手机筛选" clearable />
				</el-form-item>
				<el-form-item>
					<el-input v-model="form.nickname" placeholder="会员昵称筛选" clearable />
				</el-form-item>
				<el-form-item label="状态">
					<el-select v-model="form.status" placeholder="状态">
						<el-option v-for="a in reqCategory1" :key="a.id" :label="a.name" :value="a.id"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item>
					<el-date-picker v-model="form.paytime" type="date" placeholder="开始日期筛选" size="default" />
				</el-form-item>
				<el-form-item>
					<el-date-picker v-model="form.endtime" type="date" placeholder="结束日期筛选" size="default" />
				</el-form-item>
				<el-button type="primary" icon="el-icon-search" @click="searchclick"
					style="margin-left: 12px">筛选</el-button>
				<el-button @click="resetSearch">重置</el-button>
				<!-- <el-button @click="addrenyuan" type="success">添加</el-button> -->
				<el-button @click="daochu" type="success">导出excel</el-button>
			</el-form>
			<div>
				<el-row :gutter="18">
					<el-col :span="3">
						<div>总数量：<span>{{tableData1.totalCount}}</span></div>
					</el-col>
					<el-col :span="3">
						<div>已退款总金额：<span>{{tableData1.zprice}}</span></div>
					</el-col>

				</el-row>
			</div>
		</el-card>
		<el-table :data="tableData" border>
			<el-table-column prop="id" label="ID" align="center"> </el-table-column>
			<el-table-column prop="title" label="转单信息" align="center">
			</el-table-column>

			<el-table-column prop="fbrphone" label="发布人手机号" align="center">
			</el-table-column>
			<el-table-column prop="khphone" label="联系人手机号" align="center">
			</el-table-column>



			<el-table-column prop="phone" label="购买会员手机号" align="center">
			</el-table-column>
			<el-table-column prop="nickname" label="购买会员昵称" align="center">
			</el-table-column>
			<el-table-column prop="price" label="单个金额" align="center">
			</el-table-column>
			<el-table-column prop="num" label="购买数量" align="center">
			</el-table-column>
			<el-table-column prop="allprice" label="总金额" align="center">
			</el-table-column>
			<el-table-column prop="状态" label="状态" align="center">
				<template slot-scope="{ row }">
					<el-tag :type="row.status == 1 ? 'primary' : 'success'">{{
             row.status | statefilter
            }}</el-tag>
				</template>
			</el-table-column>

			<el-table-column prop="addtime" label="购买时间" align="center">
				<template slot-scope="scope">
					{{ scope.row.addtime | datefilter }}
				</template>
			</el-table-column>
			<el-table-column prop="tktime" label="退款时间" align="center">
				<template slot-scope="scope">
					{{ scope.row.tktime | datefilter }}
				</template>
			</el-table-column>
			<el-table-column label="操作" align="center" width="155">
				<template slot-scope="scope">
					<!--          <el-button type="primary" @click="updateuser(scope.row)" size="small"-->
					<!--          >申请退款</el-button>-->
					<!--          <br />-->
					<!--          <br />-->
					<el-button type="danger" @click="deldel(scope.row)" size="small">强制退款</el-button>
					<br />
					<br />
					<el-button type="primary" @click="tuikuanuser(scope.row)" size="small">拒绝退款</el-button>
					<br />
					<br />
					<el-button type="warning" v-if="scope.row.status=='4' &&scope.row.daozhang!='2'"
						@click="ercituikuan(scope.row)" size="small">二次退款</el-button>
				</template>
			</el-table-column>
			<!-- <el-table-column label="是否启用" align="center">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.switch"
            active-color="#13ce66"
            inactive-color="#ff4949"
            @change="change($event, scope.row.id)"
          >
          </el-switch>
        </template>
      </el-table-column> -->
			<!-- <el-table-column label="操作" align="center">
        <template slot-scope="scope">

          <el-button type="success" @click="shenheshenhe(scope.row)"
            >审核</el-button
          >
        </template>
      </el-table-column> -->
		</el-table>
		<Pagination :currentPage="this.form.pageNo" :size="this.form.pageSize" :total="total" @changelimit="changelimit"
			@changecurrentPage="changecurrentPage"></Pagination>
		<add ref="add" @refresh="refresh"></add>
		<update ref="update" @refresh="refresh"></update>
		<tuikuan ref="tuikuan" @refresh="refresh"></tuikuan>
	</div>
</template>

<script>
	import {
		getshouhoulist,
		shenhemastersh,
		postprocuretkqz,
		procuretkqzerci
	} from "@/api/dingdan";
	import add from "./modules/add";
	import update from "./modules/update";
	import tuikuan from "./modules/tuikuan";
	import {
		delcopywritingdel
	} from '@/api/servetypeIndex'
	export default {
		name: "Dashboard",
		components: {
			add,
			update,
			tuikuan
		},
		data() {
			return {
				tableData1: {
					totalCount: 0,
					zprcie: 0,
				},
				form: {
					status: 0,
					phone: "",
					nickname: "",
					paytime: "",
					endtime: "",
					pageNo: 1,
					pageSize: 5,
				},
				reqCategory1: [{
						id: 0,
						name: "全部"
					},
					{
						id: 3,
						name: "申请退款"
					},
					{
						id: 4,
						name: "已退款"
					},
					{
						id: 5,
						name: "拒绝退款"
					},
				],
				total: 0,
				tableData: [],
			};
		},
		filters: {

			statefilter(val) {
				if (val == 1) {
					return "已付款";
				} else if (val == 2) {
					return "已到账";
				} else if (val == 3) {
					return "申请退款";
				} else if (val == 4) {
					return "已退款";
				} else {
					return "拒绝退款";
				}
				// if (val == 2) {
				//   return "已到账";
				// }
				// if (val == 2) {
				//   return "申请退款";
				// }
				// if (val == 2) {
				//   return "已退款";
				// }
			},
			datefilter(val) {
				if (val) {
					var date = new Date(parseInt(val) * 1000);
					var Year = date.getFullYear();
					var Moth =
						date.getMonth() + 1 < 10 ?
						"0" + (date.getMonth() + 1) :
						date.getMonth() + 1;
					var Day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
					var Hour =
						date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
					var Minute =
						date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
					var Sechond =
						date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
					var GMT =
						Year +
						"-" +
						Moth +
						"-" +
						Day +
						"   " +
						Hour +
						":" +
						Minute +
						":" +
						Sechond;

					return GMT;
				} else {
					return "";
				}
			},
		},
		methods: {
			async change(e, id) {
				let data = {
					id: Number(id),
					status: e ? 1 : 2,
				};
				console.log(data);
				let result = await sxjcouponsxj(data);
				if (result.code == 0) {
					this.$message({
						showClose: true,
						message: "状态修改成功",
						type: "success",
					});
				}
				console.log(result);
				this.getcouponlist1();
			},
			searchclick() {
				this.getcouponlist1();
			},

			async daochu() {
				let param = {
					phone: this.form.phone,
					nickname: this.form.nickname,
					status: this.form.status,
				};
				// this.$router.push({ path: "https://api.suishilian.com/admin/exceldc", query: param });
				// const externalLinkWithParams = `http://127.0.0.1:8082/admin/excelshtk?phone=${param.phone}&nickname=${param.nickname}&status=${param.status}`;
				const externalLinkWithParams =
					`http://zdb.suishilian.com/admin/excelshtk?phone=${param.phone}&nickname=${param.nickname}&status=${param.status}`;

				window.location.href = externalLinkWithParams;
			},


			resetSearch() {
				(this.form = {
					phone: "",
					status: 0,
					nickname: "",
					vipname: "",
					endtime: "",
					paytime: "",
					pageNo: 1,
					pageSize: 5,
				}),
				this.getcouponlist1();
			},
			addrenyuan() {
				this.$refs.add.add();
			},
			updateuser(val) {
				this.$refs.update.edit(val);
			},
			tuikuanuser(val) {
				this.$refs.tuikuan.edit(val);
			},
			async ercituikuan(val) {
				console.log('val', val)
				this.$confirm('确定要退款吗, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.ercituikuanSubmit(val)
				}).catch(() => {

				});

			},
			async ercituikuanSubmit(val) {
				let result = await procuretkqzerci({
					id: val.id
				});
				if (result.code == 0) {
					this.$message({
						type: 'success',
						message: '退款成功!'
					});
				}
			},
			// 子传父:自定义事件
			refresh() {
				this.getcouponlist1();
			},
			async getcouponlist1() {
				let param = {
					paytime: this.form.paytime == "" ?
						"" : Math.floor(new Date(this.form.paytime).getTime() / 1000),
					endtime: this.form.endtime == "" ?
						"" : Math.floor(new Date(this.form.endtime).getTime() / 1000),
				};
				let result = await getshouhoulist({
					phone: this.form.phone,
					status: this.form.status,
					nickname: this.form.nickname,
					vipname: this.form.vipname,
					...param,
					pageNo: this.form.pageNo,
					pageSize: this.form.pageSize,
					adminid: Number(localStorage.getItem('userId'))
				});
				console.log(result);
				if (result.code == 0) {
					if (result.data.data != []) {
						this.tableData = result.data.data;
						this.total = result.data.totalCount;
						this.tableData1.totalCount = result.data.totalCount
						this.tableData1.zprice = result.data.zprice
					}
				}
			},
			changelimit(val) {
				this.form.pageSize = val;
				this.getcouponlist1();
			},
			changecurrentPage(val) {
				this.form.pageNo = val;
				this.getcouponlist1();
			},
			changerenyuan(val) {
				this.$refs.add.edit(val);
			},
			async shenheshenhe(val) {
				let result = await shenhemastersh({
					id: val.id,
					adminid: Number(localStorage.getItem('userId'))
				});
				if (result.code == 0) {
					this.$message({
						showClose: true,
						message: "审核成功",
						type: "success",
					});
					this.getcouponlist1();
				}
			},
			async deldel(val) {
				let result = await postprocuretkqz({
					id: val.id,
					adminid: Number(localStorage.getItem('userId'))
				});
				if (result.code == 0) {
					this.$message({
						showClose: true,
						message: "成功",
						type: "success",
					});
					this.getcouponlist1();
				}
			},
		},
		watch: {
			"form.phone": {
				handler(newVal) {
					if (newVal == "") {
						this.getcouponlist1();
					}
				},
			},
		},
		mounted() {
			this.getcouponlist1();
		},
	};
</script>

<style lang="scss" scoped>
	.dashboard {
		&-container {
			margin: 30px;
		}

		&-text {
			font-size: 30px;
			line-height: 46px;
		}
	}
</style>